<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Windows 图标生成器</title>
        <style>
            body {
                font-family: 'Segoe UI', Arial, sans-serif;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                line-height: 1.6;
                color: #333;
            }
            h1 {
                color: #0078d7;
                text-align: center;
            }
            .upload-container {
                border: 2px dashed #ccc;
                padding: 30px;
                text-align: center;
                margin: 20px 0;
                border-radius: 5px;
                background-color: #f9f9f9;
            }
            #fileInput {
                display: none;
            }
            .upload-btn {
                background-color: #0078d7;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
                transition: background-color 0.3s;
            }
            .upload-btn:hover {
                background-color: #005a9e;
            }
            #preview {
                max-width: 150px;
                max-height: 150px;
                margin: 20px auto;
                display: none;
            }
            .sizes {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
                margin-top: 30px;
            }
            .size-item {
                text-align: center;
                border: 1px solid #ddd;
                padding: 10px;
                border-radius: 5px;
                background-color: #fff;
            }
            .size-item canvas {
                border: 1px solid #eee;
                margin-bottom: 5px;
            }
            .download-btn {
                background-color: #4caf50;
                color: white;
                padding: 8px 12px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                margin-top: 5px;
                transition: background-color 0.3s;
            }
            .download-btn:hover {
                background-color: #45a049;
            }
            .download-all {
                background-color: #0078d7;
                color: white;
                padding: 12px 24px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
                margin: 30px auto;
                display: block;
                transition: background-color 0.3s;
            }
            .download-all:hover {
                background-color: #005a9e;
            }
            .instructions {
                background-color: #f0f7ff;
                padding: 15px;
                border-left: 4px solid #0078d7;
                margin: 20px 0;
            }
        </style>
    </head>
    <body>
        <h1>Windows 软件图标生成器</h1>

        <div class="instructions">
            <h3>使用说明：</h3>
            <p>1. 上传一张PNG格式的图片（建议至少310×310像素以获得最佳效果）</p>
            <p>2. 系统会自动生成所有Windows平台所需的图标尺寸</p>
            <p>3. 可以单独下载每个尺寸，或打包下载全部图标</p>
        </div>

        <div class="upload-container">
            <label for="fileInput" class="upload-btn">选择PNG图片</label>
            <input type="file" id="fileInput" accept=".png" />
            <p>或将图片拖放到此处</p>
            <img id="preview" alt="预览图" />
        </div>

        <div class="sizes" id="sizesContainer">
            <!-- 图标尺寸将在这里动态生成 -->
        </div>

        <button id="downloadAll" class="download-all" disabled>
            下载全部图标 (ZIP)
        </button>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
        <script>
            // Windows图标标准尺寸
            const iconSizes = [16, 24, 30, 44, 71, 89, 107, 142, 150, 284, 310]
            let originalImage = null

            // 文件选择和拖放处理
            const fileInput = document.getElementById('fileInput')
            const preview = document.getElementById('preview')
            const sizesContainer = document.getElementById('sizesContainer')
            const downloadAllBtn = document.getElementById('downloadAll')
            const uploadContainer = document.querySelector('.upload-container')

            // 点击上传
            fileInput.addEventListener('change', function (e) {
                if (e.target.files.length) {
                    handleImageUpload(e.target.files[0])
                }
            })

            // 拖放上传
            uploadContainer.addEventListener('dragover', function (e) {
                e.preventDefault()
                uploadContainer.style.borderColor = '#0078d7'
                uploadContainer.style.backgroundColor = '#f0f7ff'
            })

            uploadContainer.addEventListener('dragleave', function () {
                uploadContainer.style.borderColor = '#ccc'
                uploadContainer.style.backgroundColor = '#f9f9f9'
            })

            uploadContainer.addEventListener('drop', function (e) {
                e.preventDefault()
                uploadContainer.style.borderColor = '#ccc'
                uploadContainer.style.backgroundColor = '#f9f9f9'

                if (e.dataTransfer.files.length) {
                    const file = e.dataTransfer.files[0]
                    if (file.type === 'image/png') {
                        handleImageUpload(file)
                    } else {
                        alert('请上传PNG格式的图片')
                    }
                }
            })

            // 处理图片上传
            function handleImageUpload(file) {
                if (file.type !== 'image/png') {
                    alert('请上传PNG格式的图片')
                    return
                }

                const reader = new FileReader()
                reader.onload = function (e) {
                    originalImage = new Image()
                    originalImage.onload = function () {
                        preview.src = e.target.result
                        preview.style.display = 'block'
                        generateAllSizes()
                        downloadAllBtn.disabled = false
                    }
                    originalImage.src = e.target.result
                }
                reader.readAsDataURL(file)
            }

            // 生成所有尺寸的图标
            function generateAllSizes() {
                sizesContainer.innerHTML = ''

                iconSizes.forEach((size) => {
                    const container = document.createElement('div')
                    container.className = 'size-item'

                    const title = document.createElement('div')
                    title.textContent = `${size}×${size}`

                    const canvas = document.createElement('canvas')
                    canvas.width = size
                    canvas.height = size
                    canvas.style.width = '100px'
                    canvas.style.height = '100px'
                    canvas.style.objectFit = 'contain'

                    const ctx = canvas.getContext('2d')
                    ctx.imageSmoothingEnabled = true
                    ctx.drawImage(originalImage, 0, 0, size, size)

                    const downloadBtn = document.createElement('button')
                    downloadBtn.className = 'download-btn'
                    downloadBtn.textContent = '下载'
                    downloadBtn.onclick = function () {
                        // downloadCanvas(canvas, `icon_${size}x${size}.png`)
                        downloadCanvas(canvas, `Square${size}x${size}Logo.png`)
                    }

                    container.appendChild(title)
                    container.appendChild(canvas)
                    container.appendChild(downloadBtn)

                    sizesContainer.appendChild(container)
                })
            }

            // 下载单个Canvas为PNG
            function downloadCanvas(canvas, filename) {
                const link = document.createElement('a')
                link.download = filename
                link.href = canvas.toDataURL('image/png')
                link.click()
            }

            // 下载全部图标为ZIP
            downloadAllBtn.addEventListener('click', function () {
                if (!originalImage) return

                const zip = new JSZip()
                const imgFolder = zip.folder('windows_icons')

                iconSizes.forEach((size) => {
                    const canvas = document.createElement('canvas')
                    canvas.width = size
                    canvas.height = size
                    const ctx = canvas.getContext('2d')
                    ctx.drawImage(originalImage, 0, 0, size, size)

                    canvas.toBlob(function (blob) {
                        imgFolder.file(`Square${size}x${size}Logo.png`, blob)

                        // 当所有文件都添加到ZIP后保存
                        if (
                            Object.keys(imgFolder.files).length ===
                            iconSizes.length
                        ) {
                            zip.generateAsync({ type: 'blob' }).then(function (
                                content
                            ) {
                                saveAs(content, 'windows_icons.zip')
                            })
                        }
                    }, 'image/png')
                })
            })
        </script>
    </body>
</html>
